
<template>
  <el-cascader
    ref="areaCascaderRef"
    v-model="areaValueList"
    style="width: 100%;"
    :props="areaTreeOptions"
    @change="handleChange"
  />
</template>
<script>
export default {
  name: 'AreaCascader',
  props: {
    areaValues: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      areaList: [],
      areaTreeOptions: {
        label: 'areaName',
        value: 'geoAreaId',
        lazy: true,
        lazyLoad: this.handleLazyLoadLocation
      },
      areaGroup: []
    }
  },
  computed: {
    areaValueList: {
      get() {
        return this.areaValues
      },
      set(val) {
        this.$emit('update:areaValues', val)
      }
    }
  },
  created() {
  },
  methods: {
    handleLazyLoadLocation(node, resolve) {
      setTimeout(async() => {
        const areaList = await this.getLocationList(node.value)
        this.areaList = [...this.areaList, ...areaList]
        if (node.level === 2) {
          areaList.forEach(item => {
            item.leaf = true
          })
        }
        if ((node.level === 2 && areaList.length > 0) || areaList.length > 0 && areaList[0].areaName === '东城区') {
          areaList.splice(0, 0, {
            geoAreaId: -1,
            areaName: '全部',
            leaf: true
          })
        }
        if (areaList.length === 0) {
          const areaIds = []
          if (node.parent) {
            areaIds.push(node.parent.data.geoAreaId)
          }
          areaIds.push(node.data.geoAreaId)
          this.areaValueList = areaIds
          setTimeout(() => {
            this.handleChange(areaIds)
          }, 100)
        }
        resolve(areaList)
      }, 100)
    },
    async getLocationList(parentId = 0) {
      try {
        const getLocationListResult = await this.$api.getLocationList({ parentId, page: 1, pageSize: 999 })
        return getLocationListResult.list
      } catch (err) {
        console.error(err)
      }
    },
    handleChange(event) {
      try {
        let areaGroup = []
        const areaList = []
        console.log(this.$refs.areaCascaderRef)
        const nodes = this.$refs.areaCascaderRef.getCheckedNodes()[0]
        areaList[nodes.level - 1] = {
          geoAreaId: nodes.data.geoAreaId,
          areaName: nodes.data.areaName,
          parentId: nodes.data.parentId
        }
        if (nodes.parent) {
          areaList[nodes.level - 2] = {
            geoAreaId: nodes.parent.data.geoAreaId,
            areaName: nodes.parent.data.areaName,
            parentId: nodes.parent.data.parentId
          }
        }
        if (nodes.parent && nodes.parent.parent) {
          areaList[nodes.level - 3] = {
            geoAreaId: nodes.parent.parent.data.geoAreaId,
            areaName: nodes.parent.parent.data.areaName,
            parentId: nodes.parent.parent.data.parentId
          }
        }
        if (areaList.length === 3 && areaList[2].geoAreaId === -1) {
          nodes.parent.children.forEach(item => {
            if (item.data.geoAreaId > 0) {
              areaGroup.push([areaList[0], areaList[1], {
                geoAreaId: item.data.geoAreaId,
                areaName: item.data.areaName,
                parentId: item.data.parentId
              }])
            }
          })
        } else if (areaList.length === 2 && areaList[1].geoAreaId === -1) {
          nodes.parent.children.forEach(item => {
            if (item.data.geoAreaId > 0) {
              areaGroup.push([areaList[0], {
                geoAreaId: item.data.geoAreaId,
                areaName: item.data.areaName,
                parentId: item.data.parentId
              }])
            }
          })
        } else {
          areaGroup = [areaList]
        }
        this.areaGroup = [...areaGroup]
        this.$emit('checkNodes', areaGroup)
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>
